<template>
  <div class="w-full h-full">
    <div class="search" contenteditable="true">

      <div class="left"></div>
      <div class="right">
        <div class="btn">搜索</div>
      </div>
    </div>

    <div class="wrap flex mx-auto mt-[50px] w-[1000px]">
      <div class="left">
        <div v-for="(item, index) in leftNav" :key="index">
          {{ item.name }}
        </div>
      </div>
      <div class="right ml-auto"></div>
    </div>
  </div>
</template>

<script setup>

const leftNav = ref([
  {
    name: "男单"
  },
  {
    name: "女单"
  },
  {
    name: "男双"
  },
  {
    name: "女双"
  },
  {
    name: "混双"
  },


])





</script>


<style scoped lang="scss">
.wrap {



  .left {
    width: 196px;
    height: 272px;
    background: #F2F2F2;
    border-radius: 10px;
  }

  .right {
    width: 100%;
    flex: 1;
  }

}

.search {
  width: 1000px;
  height: 58px;
  background: #EFEFEF;
  border-radius: 29px;
  margin: -20px auto;
  display: flex;
  align-items: center;

  .right {
    margin-left: auto;
  }

  .btn {
    width: 99px;
    height: 49px;
    background: #2DC68D;
    border-radius: 25px;
    text-align: center;
    line-height: 49px;
    color: #fff;
  }

}
</style>